<!DOCTYPE html>
<!--
 @license
 Copyright 2019 Google LLC. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
-->
{% extends '../../src/_includes/layout.njk'%}
{% block external %}
  <link href="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.css" rel="stylesheet">
  <script src="https://unpkg.com/material-components-web@6.0.0/dist/material-components-web.min.js"></script>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
{% endblock %}
{% block html %}
  <div id="container">
    <div id="map"></div>
    <div id="sidebar">
      <div class="mdc-select mdc-select--outlined">
        <div class="mdc-select__anchor" aria-labelledby="outlined-select-label">
          <input type="text" disabled readonly id="demo-selected-text" class="mdc-select__selected-text">
          <i class="mdc-select__dropdown-icon"></i>
          <span class="mdc-notched-outline">
            <span class="mdc-notched-outline__leading"></span>
            <span class="mdc-notched-outline__notch">
              <span id="outlined-select-label" class="mdc-floating-label mdc-theme--primary">Pick a Collision Behavior</span>
            </span>
            <span class="mdc-notched-outline__trailing"></span>
          </span>
        </div>
        <div class="mdc-select__menu mdc-menu mdc-menu-surface">
          <ul class="mdc-list">
            <li class="mdc-list-item" data-value="REQUIRED">Required</li>
            <li class="mdc-list-item" data-value="REQUIRED_AND_HIDES_OPTIONAL">Required and hides optional</li>
            <li class="mdc-list-item" data-value="OPTIONAL_AND_HIDES_LOWER_PRIORITY">Optional and hides lower priority</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
{% endblock %}